import React from 'react';
import api from '../../../atoms/api';
import DelButton from '../../../components/delbutton';
import Table from '../../../components/table';
import { IData } from '../../api/admin/dictsys/query.api';
import Edit from './edit';

export default function List({ data }: { data: IData[]; }) {
	return <>
		<Table
			idfieldname='id'
			data={data.map((it) => {
				return {
					...it,
					id: `${it.type}-${it.key}`
				};
			})}
			render={(record) => {
				const d = {
					type: record.type,
					name: record.name,
					key: record.key,
					value: record.value,
					type_c: record.type,
					key_c: record.key
				};
				return <>
					<Edit data={d} />
					<DelButton query={{
						key: record.key.toString(), type: record.type
					}} dlgtitle='确认删除' api={api['/api/admin/dictsys/delete']} />
				</>;
			}}
		>
			<Table.Column<IData> title='类别' key='type' dataIndex='type' align='center' />
			<Table.Column<IData> title='名称' key='name' dataIndex='name' align='center' />
			<Table.Column<IData> title='键' key='key' dataIndex='key' align='center' />
			<Table.Column<IData> title='值' key='value' dataIndex='value' align='center' />
		</Table>
	</>;
}
